<template>
  <div>
    <!-- 17.所有页面添加骨架屏优化用户体验 -->
    <van-skeleton title :row="3" :loading="loading">
      <van-nav-bar
        title="一公里内商家"
        left-arrow
        @click-left="onClickLeft"
        :border="false"
      >
        <template #right>
          <i class="iconfont icon-dizhi"></i>
          <span>凤凰城</span>
        </template>
      </van-nav-bar>
      <!-- 14.商家列表页正确布局,提取公共结构以及样式 -->
      <!-- 15.实现商家列表页顶部tabbar切换并实现高亮效果 -->
      <van-tabbar v-model="active" :fixed="false" :border="false">
        <van-tabbar-item>全部</van-tabbar-item>
        <van-tabbar-item>超市</van-tabbar-item>
        <van-tabbar-item>便利店</van-tabbar-item>
        <van-tabbar-item>药店</van-tabbar-item>
      </van-tabbar>
      <div v-if="active === 0">
        <van-card
          v-for="item in 10"
          :key="index"
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        />
      </div>
      <div v-if="active === 1">
        <van-card
          v-for="item in 4"
          :key="index"
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题111"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        />
      </div>
      <div v-if="active === 2">
        <van-card
          v-for="item in 2"
          :key="index"
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题222"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        />
      </div>
      <div v-if="active === 3">
        <van-card
          v-for="item in 5"
          :key="index"
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题333"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        />
      </div>
    </van-skeleton>
  </div>
</template>
<script setup>
import { ref,onMounted } from "vue";
import { useRouter } from "vue-router";

const active = ref(0);
const router = useRouter();
const onClickLeft = () => router.back();
const loading = ref(true);

onMounted(() => {
  loading.value = false;
});
</script>
<style scoped>
</style>